<!-- 个人中心 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>个人中心</title>
		<link rel="stylesheet" href="../../layui/css/layui.css">
		<link rel="stylesheet" href="../../css/swiper.min.css">
		<!-- 样式 -->
		<link rel="stylesheet" href="../../css/style.css" />
		<!-- 主题（主要颜色设置） -->
		<link rel="stylesheet" href="../../css/theme.css" />
		<!-- 通用的css -->
		<link rel="stylesheet" href="../../css/common.css" />
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
	</head>
	<style>
		html::after {
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			content: '';
			display: block;
			background-attachment: fixed;
			background-size: cover;
			background-position: center;
			background-color: #f2f7f6;
			z-index: -1;
		}

		body {
			font-family: 'Microsoft YaHei', Arial, sans-serif;
			color: #333;
			background-color: #f2f7f6;
		}
		
		.index-title {
			text-align: center;
			box-sizing: border-box;
			width: 100%;
			max-width: 1280px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			margin: 30px auto 0;
			padding: 15px 0;
			background-color: #3a7e6f;
			color: #fff;
			border-radius: 6px;
			box-shadow: 0 2px 10px rgba(0,0,0,0.08);
		}
		
		.index-title span {
			padding: 0 10px;
			line-height: 1.4;
		}
		
		/* 个人中心主容器 */
		.center-container {
			display: flex;
			width: 100%;
			max-width: 1280px;
			margin: 20px auto;
			padding: 0 10px;
			box-sizing: border-box;
		}
		
		/* 左侧菜单样式 */
		.left-container {
			width: 220px;
			background-color: #3a7e6f;
			border-radius: 6px;
			overflow: hidden;
			box-shadow: 0 2px 10px rgba(0,0,0,0.08);
			margin-right: 20px;
		}
		
		.left-container .layui-nav-tree {
			width: 100%;
			background-color: transparent;
		}
		
		.left-container .layui-nav {
			position: inherit;
			background-color: transparent;
		}
		
		.left-container .layui-nav-tree .layui-nav-item {
			height: 50px;
			line-height: 50px;
			font-size: 15px;
			color: #fff;
			border-width: 0;
			border-bottom: 1px solid rgba(255,255,255,0.1);
			border-radius: 0;
			background-color: transparent;
			text-align: center;
			margin: 0;
		}
		
		.left-container .layui-nav-tree .layui-nav-bar {
			display: none;
		}
		
		.left-container .layui-nav-tree .layui-nav-item.layui-this {
			color: #fff;
			background-color: rgba(255,255,255,0.2);
		}
		
		.left-container .layui-nav-tree .layui-nav-item:hover {
			color: #fff;
			background-color: rgba(255,255,255,0.1);
		}
		
		.left-container .layui-nav-tree .layui-nav-item.layui-this:hover {
			color: #fff;
			background-color: rgba(255,255,255,0.2);
		}
		
		.left-container .layui-nav-tree .layui-nav-item a {
			line-height: 50px;
			height: 50px;
			padding: 0 15px;
			background-color: inherit;
			color: inherit;
			text-decoration: none;
			position: relative;
			font-size: 15px;
		}
		
		.left-container .layui-nav-tree .layui-nav-item a:hover {
			background-color: inherit;
		}
		
		/* 右侧内容样式 */
		.right-container {
			flex: 1;
			position: relative;
			background-color: #fff;
			border-radius: 6px;
			padding: 0;
			box-shadow: 0 2px 10px rgba(0,0,0,0.08);
			overflow: hidden;
		}
		
		/* 表单样式优化 */
		.form-header {
			background-color: #3a7e6f;
			color: #fff;
			padding: 15px 20px;
			font-size: 18px;
			font-weight: bold;
		}
		
		.form-content {
			padding: 20px;
		}
		
		.right-container .layui-form-item {
			display: flex;
			margin-bottom: 20px;
			border: 1px solid #e0e0e0;
			border-radius: 4px;
			overflow: hidden;
		}
		
		.right-container .layui-form-label {
			width: 120px;
			padding: 10px 15px;
			font-size: 15px;
			color: #3a7e6f;
			background-color: #f7fbfa;
			text-align: right;
			box-sizing: border-box;
			font-weight: 500;
			border-right: 1px solid #e0e0e0;
			margin: 0;
		}
		
		.right-container .layui-input-block {
			margin-left: 0;
			flex: 1;
			border: none;
		}
		
		.right-container .layui-input-block input.layui-input,
		.right-container .layui-input-block select.layui-input {
			height: 42px;
			line-height: 42px;
			border: none;
			padding: 0 15px;
			background-color: #fff;
			width: 100%;
			box-sizing: border-box;
		}
		
		.right-container .layui-input-block input.layui-input:focus,
		.right-container .layui-input-block select.layui-input:focus {
			border: none;
			box-shadow: none;
			background-color: #f9f9f9;
		}
		
		.right-container .layui-input-block input.layui-input[readonly] {
			background-color: #f9f9f9;
			color: #999;
			cursor: not-allowed;
		}
		
		/* 按钮样式 */
		.btn-container {
			display: flex;
			justify-content: center;
			gap: 20px;
			margin-top: 30px;
		}
		
		.btn-submit {
			display: inline-block;
			height: 42px;
			line-height: 42px;
			padding: 0 30px;
			background-color: #3a7e6f;
			color: #fff;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			font-size: 15px;
			transition: all 0.3s;
			text-align: center;
			box-shadow: 0 2px 5px rgba(58, 126, 111, 0.2);
			min-width: 120px;
		}
		
		.btn-submit:hover {
			background-color: #2d6557;
			box-shadow: 0 4px 8px rgba(58, 126, 111, 0.3);
		}
		
		.btn-logout {
			display: inline-block;
			height: 42px;
			line-height: 42px;
			padding: 0 30px;
			background-color: #fff;
			color: #3a7e6f;
			border: 1px solid #3a7e6f;
			border-radius: 4px;
			cursor: pointer;
			font-size: 15px;
			transition: all 0.3s;
			text-align: center;
			min-width: 120px;
		}
		
		.btn-logout:hover {
			background-color: #f2f7f6;
			color: #2d6557;
		}
		
		/* 响应式设计 */
		@media screen and (max-width: 768px) {
			.center-container {
				flex-direction: column;
			}
			
			.left-container {
				width: 100%;
				margin-right: 0;
				margin-bottom: 20px;
			}
			
			.right-container .layui-form-label {
				width: 100px;
			}
		}
	</style>
	<body>
		<div id="app">
			<!-- 标题 -->
			<div class="index-title">
				<span>USER CENTER</span>
				<span>个人中心</span>
			</div>
			<!-- 标题 -->

			<div class="center-container">
				<!-- 个人中心菜单 -->
				<div class="left-container">
					<ul class="layui-nav layui-nav-tree">
						<li v-for="(item,index) in centerMenu" v-bind:key="index" class="layui-nav-item" :class="index==0?'layui-this':''">
							<a :href="'javascript:jump(\''+item.url+'\')'">
								<i class="fa" :class="item.icon || 'fa-user'"></i> {{item.name}}
							</a>
						</li>
					</ul>
				</div>
				<!-- 个人中心菜单 -->
				
				<!-- 个人中心内容 -->
				<div class="right-container">
					<div class="form-header">个人信息</div>
					<div class="form-content">
						<form class="layui-form" lay-filter="myForm">
							<!-- 主键 -->
							<input type="hidden" name="id" id="id" />
							
							<div class="layui-form-item">
								<label class="layui-form-label">学生学号</label>
								<div class="layui-input-block">
									<input type="text" readonly="readonly" name="xueshengxuehao" id="xueshengxuehao" placeholder="学生学号" autocomplete="off" class="layui-input">
								</div>
							</div>
							
							<div class="layui-form-item">
								<label class="layui-form-label">学生姓名</label>
								<div class="layui-input-block">
									<input type="text" name="xueshengxingming" id="xueshengxingming" placeholder="学生姓名" autocomplete="off" class="layui-input">
								</div>
							</div>
							
							<div class="layui-form-item">
								<label class="layui-form-label">密码</label>
								<div class="layui-input-block">
									<input type="password" name="mima" id="mima" placeholder="密码" autocomplete="off" class="layui-input">
								</div>
							</div>
							
							<div class="layui-form-item">
								<label class="layui-form-label">年级</label>
								<div class="layui-input-block">
									<input type="text" name="nianji" id="nianji" placeholder="年级" autocomplete="off" class="layui-input">
								</div>
							</div>
							
							<div class="layui-form-item">
								<label class="layui-form-label">班级</label>
								<div class="layui-input-block">
									<select name="banji" id="banji">
										<option value="">请选择</option>
										<option v-for="(item,index) in banji" v-bind:key="index" :value="item">{{item}}</option>
									</select>
								</div>
							</div>
							
							<div class="layui-form-item">
								<label class="layui-form-label">性别</label>
								<div class="layui-input-block">
									<select name="xingbie" id="xingbie">
										<option value="">请选择</option>
										<option v-for="(item,index) in xingbie" v-bind:key="index" :value="item">{{item}}</option>
									</select>
								</div>
							</div>
							
							<div class="layui-form-item">
								<label class="layui-form-label">联系电话</label>
								<div class="layui-input-block">
									<input type="text" name="lianxidianhua" id="lianxidianhua" placeholder="联系电话" autocomplete="off" class="layui-input">
								</div>
							</div>
							
							<div class="layui-form-item">
								<label class="layui-form-label">院系</label>
								<div class="layui-input-block">
									<input type="text" name="yuanxi" id="yuanxi" placeholder="院系" autocomplete="off" class="layui-input">
								</div>
							</div>
							
							<div class="layui-form-item">
								<label class="layui-form-label">专业</label>
								<div class="layui-input-block">
									<input type="text" name="zhuanye" id="zhuanye" placeholder="专业" autocomplete="off" class="layui-input">
								</div>
							</div>

							<div class="btn-container">
								<button class="btn-submit" lay-submit lay-filter="*">更新信息</button>
								<button class="btn-logout" type="button" @click="logout">退出登录</button>
							</div>
						</form>
					</div>
				</div>
				<!-- 个人中心内容 -->
			</div>
		</div>

		<!-- layui -->
		<script src="../../layui/layui.js"></script>
		<!-- vue -->
		<script src="../../js/vue.js"></script>
		<!-- 组件配置信息 -->
		<script src="../../js/config.js"></script>
		<!-- 扩展插件配置信息 -->
		<script src="../../modules/config.js"></script>
		<!-- 工具方法 -->
		<script src="../../js/utils.js"></script>
		<!-- 校验格式工具类 -->
		<script src="../../js/validate.js"></script>

		<script>
			var vue = new Vue({
				el: '#app',
				data: {
					banji: [],
					xingbie: [],
					centerMenu: centerMenu
				},
                updated: function() {
					layui.form.render(null, 'myForm');
				},
				methods: {
					jump(url) {
						jump(url)
					},
					logout(){
						localStorage.removeItem('Token');
						localStorage.removeItem('role');
						localStorage.removeItem('sessionTable');
						localStorage.removeItem('adminName');
						localStorage.removeItem('userid');
						localStorage.removeItem('vip');
						localStorage.removeItem('userTable');
						localStorage.removeItem('iframeUrl');
						window.parent.location.href = '../login/login.html';
					}
				}
			})

			layui.use(['layer', 'element', 'http', 'jquery', 'form', 'upload', 'laydate'], function() {
				var layer = layui.layer;
				var element = layui.element;
				var http = layui.http;
				var jquery = layui.jquery;
				var form = layui.form;
				var upload = layui.upload;
				var laydate = layui.laydate;
				vue.baseurl = http.baseurl;

				http.request(`option/banji/banji`,'get',{},(res)=>{
					vue.banji = res.data
				});
				vue.xingbie = '男,女'.split(',')

				// 查询用户信息
				let table = localStorage.getItem("userTable");

				if(!table){
					layer.msg('请先登录', {
						time: 2000,
						icon: 5
					}, function() {
						window.parent.location.href = '../login/login.html';
					});
				}

				http.request(`${table}/session`, 'get', {}, function(data) {
					// 表单赋值
					form.val("myForm", data.data);
				});

				// 提交表单
				form.on('submit(*)', function(data) {
					data = data.field;
					if(!isMobile(data.lianxidianhua)){
						layer.msg('联系电话应输入手机格式', {
							time: 2000,
							icon: 5
						});
						return false
					}
					http.requestJson(table + '/update', 'post', data, function(res) {
						layer.msg('修改成功', {
							time: 2000,
							icon: 6
						}, function() {
							window.location.reload();
						});
					});
					return false
				});

			});
		</script>
	</body>
</html>
